<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import router from "@/router";
import { addClass } from "@/api/teacher/he/class";
import { editClass } from "@/api/teacher/he/class";
import { classBasic } from "@/stores/BackData/ClassManage/classBasic";
import { imgUpload } from "@/api/teacher/he/class";

const store = classBasic();
const aclass = reactive(store.aclass);

const active = ref(0);
const nextbtn = ref("下一步");

const next = () => {
  active.value++;
  // console.log(active.value);
  // console.log("next");
  console.log(store.type);

  if (store.type == "0") {
    console.log("添加");

    if (active.value == 0) {
      router.push("/StepOne");
    } else if (active.value == 1) {
      router.push("/StepTwo");
    } else if (active.value == 2) {
      nextbtn.value = "完成";
      router.push("/StepThree");
    } else if (active.value == 3) {
      let fd = new FormData();
      fd.append("image", store.img[0]);
      //上传图片
      imgUpload(fd).then((res) => {
        if (res.data.msg == "请求成功") {
          aclass.img = res.data.data;
          // console.log(aclass);

          addClass(aclass).then((res: any) => {
            //添加
            // console.log(res);
            if (res.data.msg == "请求成功") {
              router.push("/Class");
            }
          });
        }
      });
    } else {
      router.push("/Class");
    }
  } else if (store.type == "1") {
    // console.log("编辑");

    if (active.value == 0) {
      router.push("/StepOne");
    } else if (active.value == 1) {
      nextbtn.value = "下一步";
      router.push("/StepTwo");
    } else if (active.value == 2) {
      nextbtn.value = "完成";
      router.push("/StepThree");
    } else if (active.value == 3) {
      let fd = new FormData();
      fd.append("image", store.img[0]);
      //上传图片
      imgUpload(fd).then((res) => {
        if (res.data.msg == "请求成功") {
          aclass.img = res.data.data;

          editClass(aclass).then((res: any) => {
            //添加
            // console.log(res);
            if (res.data.msg == "请求成功") {
              router.push("/Class");
              // alert("编辑成功");
            }
          });
        }
      });
    } else {
      router.push("/Class");
    }
  }
};
const back = () => {
  active.value--;
  // console.log("back");

  // console.log(active.value);

  if (active.value == 0) {
    router.push("/StepOne");
  } else if (active.value == 1) {
    nextbtn.value = "下一步";
    router.push("/StepTwo");
  } else if (active.value == 2) {
    nextbtn.value = "完成";
    router.push("/StepThree");
  } else {
    router.push("/StepOne");
  }
};

onMounted(() => {
  router.push("/StepOne");
});
</script>
<template>
  <div class="CreateClass">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="基本信息" description="请填写课程的基本信息" />
      <el-step title="价格设定" description="请填写价格设定的基本信息" />
      <el-step title="详情页信息" description="请填写课程详情页的基本信息" />
    </el-steps>
    <div>
      <router-view></router-view>
    </div>
    <div class="btn">
      <el-button style="margin-top: 12px" @click="back" type="primary"
        >上一步</el-button
      >
      <el-button
        class="test2"
        style="margin-top: 12px"
        @click="next"
        type="primary"
        >{{ nextbtn }}</el-button
      >
    </div>
  </div>
</template>
<style scoped>
.CreateClass {
  width: 80%;
  margin: 5%;
}
.CreateClass .btn {
  text-align: center;
}
</style>
